<template>
    <view class="load" v-if="!load">
		<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
	</view>
    <view v-else>
        <view class="page_top">
			<top-status></top-status>
			<view class="tabsBack">
				<view @click="goBack()" class="blackbox">
					<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/172482955302429.png"
							mode="widthFix" class="backimg"></image>
					<!-- <uni-icons :color="topNav ? 'black' : 'lightgray'" type="left" size="30"></uni-icons> -->
				</view>
				<view class="topTitle" style="opacity: 0;">{{ '吃货排行榜' }}</view>
				 <uni-icons type="left" color="#333" size="30" style="opacity: 0;"></uni-icons>
			</view>
            <image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/ads/medal_phb_bg3.png" class="topbg" mode="widthFix"></image>
            <view class="second">
                <image class="hdimgbg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17248298459141125.png"></image>
                <image class="tophdimg" :src="list[1].HeadImgUrl" mode="aspectFill"></image>
                <view class="nametext">{{list[1].Name?$util.entitiesToUtf16(list[1].Name):''}}</view>
            </view>
            <view class="first">
                <image class="hdimgbg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1724829871187149.png"></image>
                <image class="tophdimg" :src="list[0].HeadImgUrl" mode="aspectFill"></image>
                <view class="nametext">{{list[0].Name?$util.entitiesToUtf16(list[0].Name):''}}</view>
            </view>
            <view class="third">
                <image class="hdimgbg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17248298861071308.png"></image>
                <image class="tophdimg" :src="list[2].HeadImgUrl" mode="aspectFill"></image>
                <view class="nametext">{{list[2].Name?$util.entitiesToUtf16(list[2].Name):''}}</view>
            </view>
            <view class="sezan">
                <view class="sezantltie">吃过美食</view>
                <view class="sezansum">{{list[1].TotalZAN}}</view>
            </view>
            <view class="frzan">
                <view class="fzantltie">吃过美食</view>
                <view class="fzansum">{{list[0].TotalZAN}}</view>
            </view>
            <view class="thzan">
                <view class="tzantltie">吃过美食</view>
                <view class="tzansum">{{list[2].TotalZAN}}</view>
            </view>
		</view>
        <view class="list">
            <view class="contnenbox" v-for="(item,index) in list.slice(3)" :key="index">
                <view class="ranktext">{{index+4}}</view>
                <view class="infobox">
                    <image class="hdimg" mode="aspectFill" :src="item.HeadImgUrl"></image>
                    <view>
                        <view class="winname">
                        
                        {{item.Name?$util.entitiesToUtf16(item.Name):''}}
                        </view>
                        <view class="userTags" v-if="item.Food_Medal">
                            <view class="usericon" v-if="item.Food_Medal_Icon">
                                <image :src="item.Food_Medal_Icon" mode="aspectFill"></image>
                            </view>
                            <view class="uTag">{{ item.Food_Medal }}</view>
                        </view>
                    </view>
                    
                </view>
                <view class="winsum">
                    <view class="sumtext">吃过美食：</view>
                    <view class="sumtltie">{{item.TotalZAN}}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import topStatus from "@/components/topStatus/topStatus.vue";
export default {
components: {
    topStatus
},
data() {
return {

    list:[],
    PageIndex:1,
    PageSize:10,
    load:false,
	isMore:true,
};
},
onLoad(){
    this.Sortlist()
},
onReachBottom() {
		if (this.isMore) {
			this.PageIndex++;
			this.Sortlist();
		}
	},
methods: {
    async Sortlist(){
        let res = await this.$api.post('Food/UserLikeReport',{
            PageIndex:this.PageIndex,
            PageSize:this.PageSize
        })
        if(res.code == 0){
            this.load = true
			this.list = this.PageIndex == 1 ? this.list = res.data : this.list.concat(res.data)
        }
		this.isMore = Array.isArray(res.data) && res.data.length >= this.PageSize
    },
    goBack() {
      const pages = getCurrentPages();
      if (pages.length > 1) {
        // 如果页面栈长度大于1，则说明有上一页，可以返回
        uni.navigateBack();
      } else {
        // 如果没有上一页，则导航到首页
        uni.reLaunch({
          url: '/pages/tab/home'
        });
      }
    },
},
created() {

},
}
</script>
<style lang='scss'>
.page_top {
	position: fixed;
	top: 0;
	left: 0;
	width: 750rpx;
	box-sizing: border-box;
	transition: 0.3s all;
}
.tabsBack {
	height: 44px;
	padding-left: 32rpx;
	display: flex;
	align-items: center;
	z-index: 999;

	.topTitle {
		font-weight: bold;
		font-size: 36rpx;
		color: #fff;
        flex: 1;
        text-align: center;
        position: relative;
        z-index: 100;
	}

	.blackbox {
		// width: 52rpx;
		// height: 52rpx;
		// display: flex;
		// align-items: center;
        .backimg{
            width: 64rpx;
            height: 64rpx;
            vertical-align: middle;
            position: relative;
            z-index: 100;
        }
	}
}
.topbg{
    width: 100%;
    height: 800rpx;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-color: red;
}


.second{
    position: absolute;
    top: 252rpx;
    left: 74rpx;
    z-index: 10;
    text-align: center;
    .tophdimg{
        width: 144rpx;
        height: 144rpx;
        border-radius: 50%;
        position: absolute;
        top: 54rpx;
        left: 8rpx;
    }
    .hdimgbg{
    width: 156rpx;
    height: 206rpx;
    }
    .nametext{
        width: 156rpx;
        font-size: 28rpx;
        font-weight: bold;
        color: #fff;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}
.first{
    position: absolute;
    top:184rpx;
    left: 296rpx;
    z-index: 10;
    text-align: center;
    .tophdimg{
        width: 144rpx;
        height: 144rpx;
        border-radius: 50%;
        position: absolute;
        top: 58rpx;
        left: 8rpx;
    }
    .hdimgbg{
    width: 156rpx;
    height: 206rpx;
    }
    .nametext{
        width: 156rpx;
        font-size: 28rpx;
        font-weight: bold;
        color: #fff;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}
.third{
    position: absolute;
    top: 274rpx;
    left: 538rpx;
    z-index: 10;
    text-align: center;
    .tophdimg{
        width: 144rpx;
        height: 144rpx;
        border-radius: 50%;
        position: absolute;
        top: 56rpx;
        left: 8rpx;
    }
    .hdimgbg{
    width: 156rpx;
    height: 206rpx;
    }
    .nametext{
        width: 156rpx;
        font-size: 28rpx;
        font-weight: bold;
        color: #fff;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}
.sezan{
    position: absolute;
    top: 660rpx;
    left: 100rpx;
    z-index: 10;
    .sezantltie{
        font-size: 24rpx;
        color: #406B98;
    }
    .sezansum{
        font-size: 36rpx;
        font-weight: bold;
        color: #406B98;
        text-align: center;
    }
}
.frzan{
    position: absolute;
    top: 638rpx;
    left: 332rpx;
    z-index: 10;
    .fzantltie{
        font-size: 24rpx;
        color: #8D660C;
    }
    .fzansum{
        font-size: 36rpx;
        font-weight: bold;
        color: #8D660C;
        text-align: center;
    }
}
.thzan{
    position: absolute;
    top: 664rpx;
    left: 566rpx;
    z-index: 10;
    .tzantltie{
        font-size: 24rpx;
        color: #8E4A0C;
    }
    .tzansum{
        font-size: 36rpx;
        font-weight: bold;
        color: #8E4A0C;
        text-align: center;
    }
}
.list{
    width: 100%;
    // height: 200rpx;
    background-color: #fff;
    border-radius: 24rpx 24rpx 0 0;
    position: relative;
    top: 762rpx;
    padding: 32rpx 0;
    padding-bottom: 100rpx;
    .contnenbox{
        width: 654rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24rpx 0;
        border-bottom: 1rpx solid #e4e4e4;
        margin: 0 auto;
        .ranktext{
            width: 80rpx;
            font-size: 40rpx;
            font-weight: bold;
            color: #666666;
        }
        .infobox{
            display: flex;
            align-items: center;
            .hdimg{
                width: 104rpx;
                height: 104rpx;
                border-radius: 50%;
                // background-color: yellowgreen;
            }
            .winname{
                width: 156rpx;
                font-size: 28rpx;
                font-weight: bold;
                color: #333333;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                margin-left: 32rpx;
            }
            .userTags {
                margin-left: 16rpx;
                display: flex;
                align-items: center;

                .usericon {
                    image {
                        width: 40rpx;
                        height: 40rpx;
                        margin: 4rpx 8rpx 0 0;
                    }
                }

                .uTag {
                    height: 40rpx;
                    padding: 0 16rpx;
                    background: #FFF1ED;
                    border-radius: 20rpx;
                    font-weight: 500;
                    font-size: 20rpx;
                    color: #FF6030;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }
        .winsum{
            display: flex;
            align-items: center;
            .sumtext{
                font-size: 28rpx;
                color: #999999;
            }
            .sumtltie{
                font-size: 32rpx;
                color: #3D72DA;
            }
        }
    }
}
</style>